@import '../../../core/index.less';
.orin-sw-repanel-root {
    padding: 20/@remScale;
    margin: 0px;
    height: auto;
    border-radius: 4/@remScale;
    padding: 0;
    background-color: #f2f2f2;
    box-shadow: 1/@rem 1/@rem 20/@rem 3/@rem darken(#f2f2f2, 10%);
}

.orin-sw-repanel-header {
    > .orin-sw-repanel-title {
        float: left;
    }
    > .orin-sw-repanel-more {
        float: right;
    }
    &:after {
        content: '';
        display: block;
        width: 100%;
        height: 0;
        clear: both;
    }
    background-color: #fff;
}

.orin-sw-repanel-title {
    color: #333;
    &:after {
        content: '';
        display: block;
        width: 100%;
        height: 0;
        clear: both;
    }
    height: 70/@remScale;
    line-height: 70/@remScale;
    padding: 0;
    padding-left: 20/@remScale;
    font-size: 18/@remScale;
}

.orin-sw-repanel-content {
    width: 100%;
    height: auto;
    color: #666;
    font-size: 14/@remScale;
    position: relative;
    &:after {
        content: '';
        display: block;
        width: 100%;
        height: 0;
        clear: both;
    }
}

.orin-sw-repanel-more {
    height: 70/@remScale;
    line-height: 70/@remScale;
    padding-right: 20/@remScale;
    display: flex;
    align-items: center;
    svg {
        display: inline-block;
        cursor: pointer;
        color: #bbb;
        &:hover {
            color: #ED5858;
        }
    }
}

.theme-dark {
    @background-color: #34383b;
    .orin-sw-repanel-header {
        &:after {
            content: '';
            display: block;
            width: 100%;
            height: 0;
            clear: both;
        }
        background-color: @dark_bgColor;
    }
    .orin-sw-repanel-root {
        padding: 0;
        color: @dark_fontHighlightColor;
        background-color: @background-color;
        box-shadow: none;
        &.orin-sw-repanel-transparent {
            background: transparent;
            &.padding {
                padding: 16 / @remScale;
            }
            .orin-sw-repanel-header {
                &:after {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 0;
                    clear: both;
                }
                background: transparent;
            }
            .orin-sw-repanel-title,
            .orin-sw-repanel-more {
                height: 12/@remScale;
                line-height: 1;
                color: @dark_fontHighlightColor;
                font-size: 12/@remScale;
            }
            .orin-sw-repanel-title {
                padding: 0;
            }
            .orin-sw-repanel-content {
                width: 100%;
                height: auto;
                font-size: 12/@remScale;
            }
        }
    }
    .orin-sw-repanel-title {
        height: 50/@remScale;
        line-height: 50/@remScale;
        padding: 0;
        padding-left: 20/@remScale;
        font-size: 18/@remScale;
        color: @dark_fontHighlightColor;
    }
    .orin-sw-repanel-more {
        height: 50/@remScale;
        line-height: 50/@remScale;
        padding-right: 20/@remScale;
        display: flex;
        align-items: center;
        svg {
            display: inline-block;
            cursor: pointer;
            color: #bbb;
            &:hover {
                color: #ED5858;
            }
        }
    }
    .orin-sw-repanel-content {
        color: @dark_fontHighlightColor;
        font-size: 12/@remScale;
    }
}
